<template>
  <div class="kepuchuangzuo">
    <div class="articletop">
      <!-- <div class="topshuomain">健康科普管理</div> -->
    </div>


    <div class="biaoti">{{ info.title }}</div>
    <div class="biaotiinfo">
      <div class="biaotiinfol"> {{ info.time }} 阅读量：{{ info.readingNum }} </div>
      <div class="biaotiinfor">
        <!-- <div class="biaotiinforicon"> <img src="../../../assets/images/share.png" alt=""> </div> -->
        <!-- <div class="biaotiinforicontit">分享</div> -->
      </div>
    </div>
    <div class="content" v-html="info.content"></div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { VueCropper } from "vue-cropper";
import { addtupian, zidian, addwenzhang, addcaogao, yipulistapi, detailkepu } from "@/api/system/kepu";
import { Notification, MessageBox, Message, Loading } from 'element-ui'
let downloadLoadingInstance;
export default {
  name: "kepudetail",
  components: { Editor, Toolbar },
  data() {
    return {
      form: {},
      info: ""
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.form.articleId = id
      this.getdetail()
    }
  },
  methods: {

    getdetail() {
      detailkepu({ articleId: this.form.articleId }).then(res => {
        this.info = res.data

      })
    },
  }
};
</script>

<style>
.content img {
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}

input:focus {
  outline: none;
}

.bg-my-color {
  background-color: #fff;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.anniulist {
  display: flex;
  margin-top: 10px;
}

.content {
  width: 95%;
  margin: 0 auto;
}

.content {
  width: 95%;
  margin: 0 auto;
  margin-top: 20px;

}

.biaoti {
  width: 95%;
  margin: 0 auto;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 32px;
  color: #000000;
  line-height: 54px;
  margin-top: 10px;

}

.biaotiinfo {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .biaotiinfol {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
  }

  .biaotiinfor {
    display: flex;
    cursor: pointer;

    .biaotiinforicon {
      width: 18px;
      height: 18px;
      margin-right: 6px;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .biaotiinforicontit {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
    }
  }
}

.preview {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.caijian {
  display: flex;
  justify-content: space-between;

  .caijianl {
    width: 600px;
    height: 400px;
  }

  .caijianr {

    .tutit {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      line-height: 40px;
    }
  }
}

.fenall {
  .fengmian {
    display: flex;
    width: 100%;

    .fengmianr {
      line-height: 90px;
      margin-left: 20px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 12px;
      color: #C1C1C1;
    }

    .fengmianl {
      width: 160px;
      height: 90px;
      background: #F2F3F3;
      border-radius: 4px 4px 4px 4px;

      .zhongxin {
        width: 52px;
        height: 50px;
        margin: 0 auto;
        margin-top: 25px;
        text-align: center;

        .addicon {
          width: 25px;
          height: 25px;
          margin: 0 auto;

          img {
            width: 25px;
            height: 25px;
          }
        }

        .addshuo {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 13px;
          color: #999999;
          line-height: 25px;
          text-align: center;
        }
      }

      .chongchuan {
        width: 52px;
        height: 50px;
        margin: 0 auto;
        margin-top: 25px;
        text-align: center;

        .gengicon {
          width: 25px;
          height: 25px;
          margin: 0 auto;

          img {
            width: 25px;
            height: 25px;
          }
        }

        .gengicontit {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 13px;
          color: #fff;
          line-height: 25px;
          text-align: center;
        }
      }
    }

    .fengmianl {
      position: relative;
      width: 160px;
      height: 90px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;

      &:hover {
        .overchuan::after {
          opacity: 1;
        }

        .chongchuan {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }

      .overchuan {
        position: relative;
        width: 100%;
        height: 100%;

        img {
          width: 160px;
          height: 90px;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          opacity: 0;
          transition: opacity 0.3s;
        }
      }

      .chongchuan {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 2;
        text-align: center;

        .gengicon {
          width: 25px;
          height: 25px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            filter: brightness(0) invert(1); // 图标变白色
          }
        }

        .gengicontit {
          color: white;
          font-size: 12px;
          line-height: 25px;
        }
      }

      input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 3;
      }
    }
  }
}


.kepuchuangzuo {
  width: 100%;

  .articletop {
    width: 95%;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #E5E6E8;

    .topshuomain {
      width: 100%;
      margin: 0 auto;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 20px;
      color: #000000;
      height: 60px;
      line-height: 60px;
    }
  }
}

.wechat-editor {
  // max-width: 800px;
  width: 100%;
  /* 改为100%适应父容器 */
  max-width: 1200px;
  /* 可选：添加最大宽度 */
  margin: 0 auto;
  /* 保持居中 */
  margin-top: 20px;
  background: #fff;
  // box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding-bottom: 200px;

  .bottomedit {
    height: 77px;
    width: calc(100vw - 210px);
    // border-top: 1px solid #E5E5E5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: fixed;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    left: 210px;
    right: 0;
    /* 添加内边距 */
    box-sizing: border-box;
    /* 防止溢出 */

    .bottomeditmain {
      width: 95%;
      max-width: 1130px;

      margin: 0 auto;

      display: flex;
      justify-content: space-between;

      .bottomeditmainl {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #CCCCCC;
        line-height: 77px
      }

      .bottomeditmainr {
        width: 230px;
        display: flex;
        margin-top: 20px;
        justify-content: space-between;

        .subcaogao {
          width: 100px;
          height: 37px;
          background: #4DC0D9;
          border-radius: 4px 4px 4px 4px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          text-align: center;
          line-height: 37px;
          cursor: pointer;
        }

        .subcun {
          width: 100px;
          height: 37px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #E5E5E5;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          text-align: center;
          line-height: 37px;
          cursor: pointer;

        }
      }
    }
  }


  .editor-wrapper {
    width: 95%;
    margin: 0 auto;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    overflow: hidden;
    padding-bottom: 100px;

  }

  .editor-toolbar {
    border-bottom: 1px solid #e7e7e7;
    background: #f9f9f9;
    padding: 8px 16px;
  }

  .editor-content {
    padding: 0 16px;
  }

  .editor-title {
    width: 100%;
    border: none;
    outline: none;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    padding: 20px 0 15px;
    margin: 0;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
    transition: border-color 0.3s;
    text-align: center;

    &:focus {
      // border-bottom-color: #000;
    }

    &::placeholder {
      color: #999;
      font-weight: normal;
    }
  }

  ::v-deep .w-e-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
    margin-bottom: 8px;
  }

  /* 调整编辑器内容区域 */
  .editor-body {
    min-height: 500px;
    padding: 16px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-top: 8px;
    /* 为小工具栏留出空间 */
  }

  // /* 覆盖wangEditor默认样式 */
  // ::v-deep .w-e-text-container {
  //   border: none !important;
  //   box-shadow: none !important;
  // }

  // ::v-deep .w-e-bar {
  //   background: transparent !important;
  //   border-bottom: none !important;
  // }
}
</style>
